<template>
  <el-dialog
    ref="basicDialogRef"
    class="basic-dialog"
    :class="{ 'top-compact': !footer }"
    :visible.sync="isShow"
    :title="title"
    v-bind="newAttrs"
  >
    <slot />
    <template v-if="footer" #footer>
      <slot name="footer">
        <div v-if="footer === true" class="foot">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </div>
        <BaseRender v-else :data="footer" />
      </slot>
    </template>
  </el-dialog>
</template>

<script>
import BaseRender from './BaseRender.vue';

const defaultAttrs = {
  width: 'fit-content',
  customClass: 'popup',
  closeOnClickModal: false,
  appendToBody: true,
  destroyOnClose: true,
  // center: true,
  // showClose: false,
};
export default {
  name: 'BasicDialog',
  components: {
    BaseRender,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '温馨提示',
    },
    footer: {
      type: Boolean,
      default: true,
    },
    // 点击取消按钮处理逻辑
    cancel: {
      type: Function,
      default: undefined,
    },
    // 点击确认按钮处理逻辑
    confirm: {
      type: Function,
      default: undefined,
    },
  },
  data() {
    return {
      newAttrs: {},
    };
  },
  computed: {
    // 是否显示弹窗
    isShow: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      },
    },
  },
  created() {
    this.newAttrs = { ...defaultAttrs, ...this.$attrs };
  },
  methods: {
    // 点击取消按钮
    handleCancel() {
      if (this.cancel) return this.cancel?.();
      this.isShow = false;
    },
    // 点击确认按钮
    handleConfirm() {
      if (this.confirm) return this.confirm?.();
      this.isShow = false;
      this.$message.info('点击了【确认按钮 - confirm】');
    },
  },
};
</script>
<style lang="scss">
.basic-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  .popup {
    min-width: 200px;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}
</style>
